<template>
  <div class="home-page">
<!--    &lt;!&ndash; 轮播图区域 &ndash;&gt;-->
<!--    <el-carousel indicator-position="outside" :autoplay="true" style="margin-top: 5px;">-->
<!--      <el-carousel-item v-for="(item, index) in imageList" :key="index">-->
<!--        <el-image-->
<!--            style="width: 100%; height: 500px; object-fit: cover;"-->
<!--            :src="item"-->
<!--            fit="cover"-->
<!--        />-->
<!--      </el-carousel-item>-->
<!--    </el-carousel>-->

    <!-- 欢迎展示区域 -->
    <el-row :gutter="20" style="margin-top: 20px;max-height: 100px">
      <!-- 用户信息展示 -->
      <el-col :span="6">
        <div class="user-info">
          <div class="avatar-container">
            <!-- 这里使用Element Plus的el-avatar组件展示用户头像 -->
            <el-avatar :size="80" :src="userStore.avatar" ></el-avatar>
          </div>
          <div class="user-details">
            <p class="username">{{userStore.username}}</p>
            <p class="balance">余额: {{userStore.accountBalance}}元</p>
            <p class="frozen-balance">冻结余额: {{userStore.freezeMoney}}元</p>
          </div>
        </div>
      </el-col>

      <!-- 日历组件 -->
      <el-col :span="18">
          <el-calendar v-model="currentDate" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {apiGet} from "@/utils/api";
import {onMounted, ref} from "vue";
//获取用户相关
import { useUserStore } from '@/store/modules/user'

let userStore = useUserStore()
const imageList = ref([]);
const currentDate = ref(new Date());
const init = async () => {
  const {data} = await apiGet("/banner/findAllData");
  //遍历data
  data.forEach(item => {
    imageList.value.push(item.imgurl);
  })
}
//组件挂载完毕
onMounted(async () => {
  await init()
})
</script>

<style scoped>
.home-page {
  padding: 20px;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-container {
  margin-bottom: 15px;
}

.user-details {
  text-align: center;
}

.username {
  font-size: 18px;
  font-weight: bold;
}

.balance,
.frozen-balance {
  margin-top: 5px;
  color: #606266;
}
</style>